<template>
    <div class="default container">
        <div class="row">
            <button class="col btn btn-light rounded border-0" @click="toPage('About')">
                <my-icon id="bi-book-half" color="text-danger" size="48"></my-icon>
                <h3>About me</h3>
            </button>
            <button class="col btn btn-light rounded border-0" @click="toPage('Resume')">
                <my-icon id="bi-messenger" color="text-warning" size="48"></my-icon>
                <h3>Resume</h3>
            </button>
        </div>
        <div class="row">
            <button class="col btn btn-light rounded border-0" @click="toPage('Portfolio')">
                <my-icon id="bi-tools" color="text-success" size="48"></my-icon>
                <h3>Portfoloi</h3>
            </button>
        </div>
    </div>
</template>
<script>
import {routerJump} from '../lib/router-lib.js'
export default {
    name: 'default',
    setup() {
        const {toPage} = routerJump()
        return {
            toPage
        }
    }
}
</script>
<style scoped>
.row {
    height: 30vh;
}
.col {
    color: white;
    margin: 10px 20px;
    background-color: rgba(255, 255, 255, 0.1);
}
</style>
